<template>
	<view v-if="answer">
		<view class="content">
			<rich-text :nodes="question.content == undefined || question.content == null ? '' : question.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
		<view class="choice-item" @click="update(index)" v-for="(item,index) in question.answers" :key="index">
			<view>
				<view :id="selected[index] ? 'item-button-selected' : 'item-button'">
					<text>{{choiceNames[index]}}</text>
				</view>
			</view>
			<rich-text id="item-content" :nodes="item.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'multiple-choice',
		data() {
			return {
				choiceNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				selected: []
			}
		},
		created() {
			if (this.$props.answer) {
				for (let i in this.$props.question.answers) {
					if (this.$props.answer.content != undefined && this.$props.answer.content != null && this.$props.answer
						.content.indexOf(this.$props.question.answers[i].id) > -1) {
						this.$data.selected[i] = true;
					} else {
						this.$data.selected[i] = false;
					}
				}
			}
		},
		beforeUpdate() {
			if (this.$props.answer) {
				for (let i in this.$props.question.answers) {
					if (this.$props.answer.content != undefined && this.$props.answer.content != null && this.$props.answer
						.content.indexOf(this.$props.question.answers[i].id) > -1) {
						this.$data.selected[i] = true;
					} else {
						this.$data.selected[i] = false;
					}
				}
			}
		},
		methods: {
			update: function(index) {
				if (this.$props.disabled) {
					return;
				}
				this.$data.selected[index] = !this.$data.selected[index];
				var len = this.$props.question.answers.length;
				var v = '';
				for (var i = 0; i < len; i++) {
					if (this.$data.selected[i]) {
						v = v.concat(this.$props.question.answers[i].id).concat(',');
					}
				}
				this.$props.answer.content = v.length > 1 ? v.substr(0, v.length - 1) : '';
				this.$forceUpdate();
				this.$props.change(this.$props.question.questionId);
			}
		},
		props: {
			question: {
				type: Object,
				value: {}
			},
			answer: {
				type: Object,
				value: {}
			},
			change: {
				type: Function,
				value: function(questionId) {}
			},
			disabled: {
				type: Boolean,
				value: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 710rpx;
		margin: 12rpx 20rpx;
		font-size: 36rpx;
	}

	.answer {
		width: 710rpx;
		margin: 12rpx 20rpx;
	}

	.choice-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin: 24rpx 20rpx;

		#item-button {
			width: 72rpx;
			height: 72rpx;
			background: white;
			border-radius: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			color: $primary-color;
			border: 2rpx solid $primary-color;
		}

		#item-button:active {
			background: rgba(0, 0, 0, 0.1);
		}

		#item-button-selected {
			width: 72rpx;
			height: 72rpx;
			background: $primary-color;
			border-radius: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			color: white;
			border: 2rpx solid $primary-color;
		}

		#item-content {
			margin-left: 12rpx;
			margin-top: 16rpx;
		}
	}
</style>
